<@>layout("/common/default.html"){
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a href="">首页</a>
           <span lay-separator="">/</span>
        <a href="">在线预览</a>
           <span lay-separator="">/</span>
        <a><cite>文件预览</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i>
    </a>
</div>
<div class="x-body">
    <div class="layui-row">
        <div class="layui-form layui-col-md12 x-so">
            <input id="name" type="text" name="name" placeholder="名称" autocomplete="off" class="layui-input">
            <button class="layui-btn" onclick="doSearch();"><i class="layui-icon">&#xe615;</i></button>
            <button type="button" class="layui-btn"  id="uploadImg" ><i class="layui-icon">&#xe67c;</i>上传文件</button>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <table class="layui-table"
               lay-data="{id:'fileonline-list', url:'${ctxPath}/ajax/fileonline/list', page:true,request: {pageName: 'page' ,limitName: 'rows'} }"
               lay-filter="fileonline-list">
            <thead>
            <tr>
                <th lay-data="{field:'index', width:80, templet: '#table-index'}">序号</th>
                <th lay-data="{field:'name', width:150}">名称</th>
                <th lay-data="{field:'createTimeStr', width:280, sort:true}">创建时间</th>
                <th lay-data="{field:'createUserName', width:200}">创建人</th>
                <th lay-data="{field:'id', toolbar: '#toolbar',fixed:'right',width:200}">操作</th>
            </tr>
            </thead>
        </table>
    </div>

    <script type="text/html" id="toolbar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">预览</a>
    </script>

    <script type="text/html" id="role-state">
    </script>

    <script type="text/html" id="table-index">
        {{d.LAY_TABLE_INDEX + 1}}
    </script>
</div>
<script>
    $(function () {
        layui.use('table', function () {
            var table = layui.table;
            table.on('tool(fileonline-list)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                if (layEvent === 'edit') {
                    //window.location.href = '${ctxPath}/excelTemplate/edit?id=' + data.id;
                }
            });
        });

        layui.use('upload', function(){
            var upload = layui.upload;
            var fileUrl = "http://localhost:8012/fileUpload";
            //执行实例
            var uploadInst = upload.render({
                elem: '#uploadImg' //绑定元素
                ,url: fileUrl //上传接口
                ,method: 'POST'
                ,accept : 'file'
                ,async:false
                ,done: function(r){
                    //上传完毕回调
                    var code = r.code;
                    var imgUrl = r.imgUrl;
                    var msg = r.msg;
                    //假设code=0代表上传成功
                    if(code == '1'){
                        $.msg(msg, function () {
                        }, 1);
                    }else {
                        $.msg(msg, function () {
                        }, 2);
                    }
                }
                ,error: function(){
                }
            });
        });
    });

    //搜索
    function doSearch() {
        layui.use('table', function () {
            var table = layui.table;
            table.reload('fileonline-list', {
                url: '${ctxPath}/ajax/role/list',
                where: {
                    name: $('#name').val()
                }//设定异步数据接口的额外参数
            });
        });
    }
</script>
<@>}